/******第1步：样式标准化(重置):将浏览器提供的默认样式统一化实用化*******/
/* 有些元素默认样式不好用，需要在最开始写页面时重新设定统一一下，改成适合于当前项目的样式 */
/* 1.将html根元素设置一下 */
html {
	/* 1.1根元素html的高度默认是靠内容撑起来的，很矮，使用起来不方便
	 我们可以让html的高度为它的父级，也就是浏览器窗口高度的100%*/
	height: 100%;
	/* 1.2 设定根元素html的字体大小，页面中所有使用rem单位的长度
	 都是相对于html的字体大小而言的*/
	font-size: 14px;
}
/* 2.body的样式重置 */
body {
	/* 2.1 不同浏览器外间距不同，不要，清零 */
	margin: 0;
	/* 2.2 字体与字体颜色的设置 */
	font-family: '黑体';
	color: #666;
	/* 2.3 背景颜色 */
	background-color: #f5f5f5;
}
/* 3. 超链接样式重置 */
a:link {
	/* 3.1清除超链接自带的下划线 */
	text-decoration: none;
	/* 3.2修改超链接的字体颜色，超链接默认不会继承body的字体颜色 */
	color: #808080;
}
a:visited {
	/* 3.3超链接访问前后的字体颜色是一样的 */
	color: #808080;
}
/* 3.4 设置超链接鼠标悬停时的样式 */
a:hover {
	/* 鼠标悬停，超链接字体颜色会深一些 */
	color:#666;
}
/* 4.列表的样式重置 */
ul,ol {
	/* 4.1浏览器为所有的列表提供了间距，需要清除 */
	margin: 0;
	padding: 0;
}
/* 4.2 清除浏览器提供的每个列表项前的提示符号 */
li {
	/* 去掉列标签默认的实心圆(ul)/阿拉伯数字(ol) */
	list-style-type: none;
}
/* 5.清除段落默认存在的上下外间距 */
p {
	/* 浏览器为所有的段落提供了上下外间距，需要清除 */
	margin: 0;
}
/* 6.清除输入元素的外轮廓线，就没有什么项目想使用这个外轮廓线的 */
input {
	/* 当输入框获得输入焦点时，会显示外轮廓线，需要清除 */
	outline: none;
}
/******第2步:样式脚手架(Scaffolding):声明一些基础类，辅助构建整个页面*******/
/* 7.版心基础类 */
.container {
	/* 7.1根据设计给的宽度制定版心的宽度 */
	width: 1200px;
	/* 7.2 设置版心中的内容在页面中水平居中 */
	margin: 0 auto;
}
/* 8.清除父级高度坍塌影响的工具类 */
.clearfix::after {
	content: ''; /* 在指定元素的最后生成一个空的假孩子 */
	display: block; /* 显示模式变为块级才能使用clear属性 */
	clear: both; /* 清除向左/向右两个方向浮动产生的影响 */
}
/* 9. 开发测试阶段的辅助线，颜色自定义，代码完成后记得删掉！ */
div {
	border: 1px solid #aaa;
}